<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/goods/select_area.css" />
	<script type="text/javascript">
		(function () {
			var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
			clientWidth = clientWidth || localStorage.getItem("clientWidth")
			if (clientWidth > 750)
				clientWidth = 750;
			document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
		})();
	</script>
	<style type="text/css">
		.mui-bar-nav {
			top: 0;
		}
		
		.mui-content {
			padding-bottom: 100px;
			padding-top: 44px !important;
		}
		
		html,
		body {
			padding-top: 0;
		}
	</style>
</head>

<body>
	 
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon  mui-pull-left">
			<img src="../images/ptsp/left_arr_03.png" alt="">
		</a>
		<h1 class="mui-title">切换社区</h1>
	</header>
	<div class="mui-content">
		<div class="select_city">
			<div @click="to_select_city()">
				<i class="position_icon"></i>
				<span class="title">{{now_city}}</span>
				<i class="bottom_arr_icon"></i>
			</div>
			<div class="city_list" v-show="select_city_is_show">
				<span :class="item.is_active?'city_item active':'city_item'" @click="select_city(item.id,item.name)" v-for="item in city">{{item.name}}</span>
			</div>
		</div>

		<div class="select_area_main">
			<div class="left fl">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--这里放置真实显示的DOM内容-->
						<ul>
							<li :class="item.is_active?'active':''" v-for="item in now_areas" @click="select_area(item.id)">{{item.name}}</li>

						</ul>
					</div>
				</div>
			</div>
			<div class="right fl">

				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!--这里放置真实显示的DOM内容-->
						<ul>
							<li v-for="(item,i) in homes" @click="onindex(item)">{{item.name}}</li>
						</ul>
					</div>
				</div>


			</div>
		</div>
	</div>

	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../sim_data/city.js"></script>
	<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init({
			//swipeBack: true //启用右滑关闭功能
		});
		var mask;
		var app = new Vue({
			el: '.mui-content',
			data: {
				city: [],
				now_city: '西安',
				now_areas: [],
				now_area: '',
				homes:[],

				active_class: '',
				select_city_is_show: false
			},
			methods: {
				to_select_city: function (city_num) {
					mask.show();//显示遮罩
					this.select_city_is_show = true;

				},
				onindex:function(item){
					$.ajax({
						type:"get",
						url:"https://zhapp.4hl.cn/app/user/App_UserCommunity?uid="+this.user.uid+"&comyid=6",
						async:true,
						success:function(res){
							console.log(res);
							
						},
						error:function(err){
							console.log(err)
							
						}
					});
//					host_config.localStorage.setItem(host_config.address,item.name);
//					localStorage.setItem("user")
//					mui.openWindow('index.html');
				},
				select_city: function (o,j) {
					let that = this;
					console.log(o)
					mui.get(url+"api/system/getRegion/pid/"+o+"/type/3",{},function(data){
						that.now_areas = []
						mui.each(data,function(key,value){
					        that.now_areas.push(value)
					    });
					    mui.get(url+"api/system/getComm/pid/"+that.now_areas[0].id+"/area/"+that.now_areas[0].id,{},function(data){
							var data = JSON.parse(data).data
							app.homes = []
							mui.each(data,function(key,value){
						        app.homes.push(value)
						  });
						  console.log(data)
						},'json')
					    //that.city.push(data)
					},'json')
					
					this.select_city_is_show = false;	
					that.now_city = j
					mask.close();
				},
				select_area: function (area_num) {
					console.log(area_num,'------')
				 	mui.get(url+"api/system/getComm/pid/"+area_num+"/area/"+area_num,{},function(data){
						var data = JSON.parse(data).data
						mui.each(data,function(key,value){
					        app.homes.push(value)
					  });
					  console.log(data)
					},'json')
					
					return false;
					for(var i =0;i<this.now_areas.length;i++){
						this.now_areas[i].is_active = 0;
						if(area_num==this.now_areas[i].value){
							console.log(this.now_areas[i].text)
							this.now_areas[i].is_active =1;
							if(this.now_areas[i].children){
								this.homes = this.now_areas[i].children;
							}else{
								mui.toast("此区域暂无社区")
							}
							

						}
					}
					 
				}
			},
			mounted: function () {
				let that = this;
				console.log('渲染加载')
				mask = mui.createMask(function () {
					app.select_city_is_show = false;
				});
				//获取省
				mui.get(url+"api/system/province",{},function(data){
					//that.city.push(data)
				    //console.log(data)
				},'json')
				mui.get(url+"api/system/getRegion/pid/24/type/2",{},function(data){
					console.log(data)
					mui.each(data,function(key,value){
				        that.city.push(value)
				  });
				  //console.log(that.city[0].id)
				    mui.get(url+"api/system/getRegion/pid/"+that.city[0].id+"/type/3",{},function(data){
						mui.each(data,function(key,value){
					        that.now_areas.push(value)
					   });
					    mui.get(url+"api/system/getComm/pid/"+that.now_areas[0].id+"/area/"+that.now_areas[0].id,{},function(data){
							var data = JSON.parse(data).data
							mui.each(data,function(key,value){
						        app.homes.push(value)
						  });
						  console.log(data)
						},'json')
				    },'json')
				    //that.city.push(data)
				},'json')

				//that.city = 
//				this.now_city = city.children[0].text;//初始化默认城市
//
//				city.children[0].is_active = 1;//将0号城市设为默认城市
//
//				this.city = city.children;//初始化城市列表数据
//
//				this.now_areas = city.children[0].children;//初始化区域列表数据
//				this.now_areas[0].is_active = 1;//将0号县区设为默认县区
//				if( city.children[0].children[0].children){
//					this.homes = city.children[0].children[0].children;
//				}else{
//					mui.toast("此区域暂无社区")
//
//				}
				

				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
		},
		created:function(){
			var user = get_user_info();
			if(user) {
				this.user = user
			}else{
				mui.toast("未登录")
				mui.openWindow("logn.html","logn.html")
			}
		}
		})
		
		
		
		//http://zhapp.135k.com/api/system/getRegion/pid/23/type/2
		
		
		
	</script>
</body>

</html>